<template>
    <div class="api-content" v-if="deleteFlag && (api.uri.indexOf(searchUrl) > -1 || searchUrl === '')">
        <div :class="api.isAutoGen === '1'?'api-detail': 'api-detail api-define'">
            <div class="url-title">
                <div class="title">URL</div>
                <div class="url">{{api.uri}}</div>
            </div>
            <div class="api-row">
                <div class="api-request">
                    <p><label>请求方法</label><span>{{api.requestMethod}}</span></p>
                    <p><label>标签</label>{{api.tag}}</p>
                </div>
                <div class="api-request">
                    <p><label>概述</label>{{api.summary}}</p>
                    <p><label>返回值</label>{{api.responseObjName}}</p>
                </div>
                <div class="api-request">
                    <p v-if="api.responseObjGenericType"><label>泛型类型</label>{{api.responseObjGenericType}}</p>
                    <p v-if="api.responseObjGenericFormat"><label>泛型格式</label>{{api.responseObjGenericFormat}}</p>
                </div>
                <div class="api-param">
                    <div @click="showParam = !showParam">参数表 -</div>
                    <button v-if="api.isAutoGen === '0'" type="text" class="edit-api-btn" @click="editApi">修改</button>
                </div>
            </div>
            <div class="api-delete"  v-if="api.isAutoGen === '0'">
                <Icon type="close-round" color="#fff" size="18px" @click="deleteApi"></Icon>
            </div>
        </div>
        <div v-if="showParam">
            <Table :columns="paramColumns" :data="paramList"></Table>
        </div>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                paramColumns: [
                    {
                        title: '名称',
                        key: 'name'
                    },
                    {
                        title: '形式',
                        key: 'form'
                    },
                    {
                        title: '描述',
                        key: 'description'
                    },
                    {
                        title: '必需',
                        key: 'isRequired',
                        render: (h, params) => {
                            if(params.row.isRequired=='0'){
                                return h('span', '否');
                            }else {
                                return h('span', '是');
                            }
                        }
                    },
                    {
                        title: '类型',
                        key: 'type'
                    },
                    {
                        title: '格式',
                        key: 'format'
                    }
                ],
                paramList: [],
                showParam: false,
                deleteFlag: true
            };
        },
        props:{
            api: Object,
            searchUrl: String
        },
        watch:{
            showParam: function (val) {
                if (val) {
                    this.$http.get( '/codegen/api/v1/apiparams/' + this.api.id + '/show').then((response) => {
                        this.paramList = response.data.apiParams;
                        for (let i = 0; i < response.data.apiParams.length; i++) {
                            if (this.paramList[i].type === 'array') {
                                this.paramList[i].format = response.data.apiParams[i].arrayType + '.' + response.data.apiParams[i].format;
                            }
                        }
                    });
                }
            }
        },
        methods:{
            deleteApi(){
                this.$Modal.confirm({
                    title: 'API描述:' + this.api.summary,
                    content: '<p>确认删除该API列表信息吗？</p>',
                    onOk: () => {
                        this.$http.delete('/codegen/api/v1/apiobj/'+ this.api.id +'/delete').then((response) => {
                            if(response.data.statusCode === '200'){
                                this.$Message.success('删除成功');
                                this.deleteFlag = true;
                            }
                        });
                    }
                });
            },
            editApi(){
                this.$emit('edit-api', this.api);
            }
        }
    };
</script>

<style lang="scss" scoped>
    .api-content{
        margin-bottom: 16px;
        position: relative;

        .api-delete{
            position: absolute;
            right: 8px;
            top: 8px;
            cursor: pointer;
        }

        .api-detail{
            padding: 12px;
            background-color: #efefef;
            border-radius: 6px;

            &.api-define{
                background:linear-gradient(to right, #6488fd,#79c4fe);
                color: #fff !important;
                .url-title{
                    .title{
                        color: #cfdfff !important;
                    }
                }
                label{
                    color: #cfdfff !important;
                }
            }

            .url-title{
                display: flex;
                font-size: 16px;
                .title{
                    width: 60px;
                    color: #bbbec4;
                }
                .url{
                    font-weight: 600;
                }
            }

            .api-row{
                display: flex;

                .api-request{
                    width: 290px;
                    margin-right: 16px;
                    label{
                        width: 60px;
                        color: #bbbec4;
                        display: inline-block;
                    }
                    p {
                        overflow:hidden;
                        text-overflow:ellipsis;
                        white-space:nowrap;
                        margin-top: 8px;
                    }
                }

                .api-param{
                    align-self: flex-start;
                    margin-top: 8px;
                    margin-left: auto;
                    &>div{
                        cursor: pointer;
                    }

                    .edit-api-btn{
                        color: #fff;
                        border: 1px solid #fff;
                        width: 43px;
                        text-align: center;
                        vertical-align: middle;
                        background: transparent;
                        font-size: 12px;
                        cursor: pointer;
                        margin-top: 4px;
                    }
                }
            }

        }

    }

</style>